<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>09_form</title>
</head>
<body>

<h2>非受控组件</h2>
<div id="example"></div>

<h2>受控组件</h2>
<div id="example2"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  /*
  1. 问题: 在react应用中, 如何收集表单输入数据
  2. 包含表单的组件分类
    受控组件
    非受控组件
  */
  /*
  需求: 自定义包含表单的组件
    1. 界面如下所示
    2. 输入用户名密码后, 点击登陆提示输入信息
    3. 不提交表单
  */

  /*
  非受控组件:
      组件中的表单项数据在输入过程中不收集, 在提交时手动从DOM元素中读取
      技术点: ref
   */
  class LoginForm extends React.Component {

    usernameRef = React.createRef()
    pwdRef = React.createRef()

    handleSubmit = (event) => {
      // 阻止事件的默认行为: 提交表单
      event.preventDefault()

      // 手动读取输入框的值
      const username = this.usernameRef.current.value
      const pwd = this.pwdRef.current.value

      alert(`准备提交的用户名为: ${username}, 密码:${pwd}`)
    }

    render() {

      return (
        <form onSubmit={this.handleSubmit} action="/test">
          <label>用户名:</label>
          <input type="text" ref={this.usernameRef}/>&nbsp;
          <label>密码:</label>
          <input type="password" ref={this.pwdRef}/>&nbsp;
          <input type="submit" value="登陆"/>
        </form>
      )
    }
  }

  /*
  受控组件:
      组件中的表单项数据在输入过程中实时收集到state, 在提交时直接读取状态数据即可
      技术点: onChange + state
   */
  class LoginForm2 extends React.Component {

    state = {
      username: '',
      pwd: ''
    }

    /*
    在输入过程中实时的更新到状态数据
     */
    handleNameChange = (event) => {
      this.setState({
        username: event.target.value
      })
    }

    handlePwdChange = (event) => {
      this.setState({
        pwd: event.target.value
      })
    }

    handleSubmit = (event) => {
      // 阻止事件的默认行为: 提交表单
      event.preventDefault()

      // 直接从state中取数据
      const {username, pwd} = this.state

      alert(`准备提交的用户名为: ${username}, 密码:${pwd}`)
    }

    render() {

      return (
        <form onSubmit={this.handleSubmit} action="/test">
          <label>用户名: </label>
          <input type="text" value={this.state.username} onChange={this.handleNameChange}/> &nbsp;
          <label>密码: </label>
          <input type="password" value={this.state.pwd} onChange={this.handlePwdChange}/>&nbsp;
          <input type="submit" value="登陆"/>
        </form>
      )
    }
  }

  ReactDOM.render(<LoginForm/>, document.getElementById('example'))
  ReactDOM.render(<LoginForm2/>, document.getElementById('example2'))
</script>
</body>
</html>
